import React, { Component } from 'react';
import { NavBar,Carousel,Flex } from 'antd-mobile';
import "./index.scss";
import { withRouter } from "react-router-dom";
import SearchInput from "../searchInput/searchInput";
import myaxios from "../../utils/myaxios"


class index extends Component {
    state = {
        swiper_list:[], //轮播图
        nav_list:[], //分类导航
        img_list:[], //图片列表
    }
    //轮播图点击事件
    handleSwiperClick = (goods_id) => {
        this.props.history.push("/goodDetails/"+goods_id)
    }
    //分类导航点击事件
    handleCatItemClick = (params) => {
        this.props.history.push("/classify")
    }
    //图片点击事件
    handleImgClick = () => {
        this.props.history.push("/goodList/query='123'");
    }
    
    componentDidMount(){
        //轮播图接口
        myaxios.get("home/swiperdata").then(res=>{
            this.setState({
                swiper_list: res
            })
        })
        //分类导航接口
        myaxios.get("/home/catitems").then(res => {
            this.setState({
                nav_list: res
            })
        })
        //图片列表接口
        myaxios.get("/home/floordata").then(res=>{
            console.log(res)
            this.setState({
                img_list: res
            })
        })
    }
    render() {
        return (
            <div className="yg-index">
                {/* 标题开始 */}
                <div className="yg-index-title">
                    <NavBar className="yg-index-title-text">优购商城</NavBar>
                </div>
                {/* 标题结束 */}
                {/* 搜索开始 */}
                <div className="yg-index-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索结束 */}
                {/* 轮播开始 */}
                <div className="yg-index-swiper">
                <Carousel autoplay={true} infinite>
                    {this.state.swiper_list.map((val) => (
                        <div
                        onClick={this.handleSwiperClick.bind(this,val.goods_id)}
                        key={val.goods_id}
                        style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                        <img
                            src={val.image_src}
                            alt=""
                            style={{ width: '100%', verticalAlign: 'top' }}
                            onLoad={() => {
                            // fire window resize event to change height
                            window.dispatchEvent(new Event('resize'));
                            this.setState({ imgHeight: 'auto' });
                            }}
                        />
                        </div>
                    ))}
                    </Carousel>
                </div>
                {/* 轮播结束 */}
                {/* 分类导航开始 */}
                <div className="yg-index-nav">
                    <Flex>
                        {
                            this.state.nav_list.map((v)=>{
                                return <Flex.Item key={v.name} onClick={this.handleCatItemClick}>
                                    <img src={v.image_src} alt=""/>
                                </Flex.Item>
                            })
                        }
                    </Flex>
                </div>
                {/* 分类导航结束 */}
                {/* 图片列表开始 */}
                <div className="yg-index-imgList">
                    {
                        this.state.img_list.map(v => {
                            return <div className="product-item" key={v.floor_title.image_src}>
                                {/* 标题开始 */}
                                <div className="product-title">
                                    <img src={v.floor_title.image_src} alt=""/>
                                </div>
                                {/* 标题结束 */}
                                {/* 图片开始 */}
                                <div className="product-img">
                                    {
                                        v.product_list.map(vv=>{
                                            return <div className="product-img-item" key={vv.image_src} onClick={this.handleImgClick}>
                                                <img src={vv.image_src} alt=""/>
                                            </div>
                                        })
                                    }
                                </div>
                                {/* 图片结束 */}
                            </div>
                        })
                    }
                </div>
                {/* 图片列表结束 */}
            </div>
        )
    }
}


export default withRouter(index)
